<template>
  <div>
    <div class="tuwen_box">
       <el-tabs v-model="activeName" >
    <el-tab-pane label="基础设置" name="1">
         <el-form label-width="120px">
         <el-form-item label="导航标题">
                   <el-switch v-model="active_component.propValue.titleType"></el-switch>
         </el-form-item>
         <el-form-item label="导航链接">
                  <div class="flex" v-for="(item,i) of active_component.propValue.footerList" :key="i">
                     <div class="flex">
                        <el-input v-model="item.name"></el-input>
                        <el-input v-model="item.link"></el-input>
                        <div class="close_item" @click="deleteItem(active_component.propValue.footerList,i)">
                            <i class="el-icon-circle-close"></i>
                        </div>
                     </div>
                  </div>
                 <el-button @click="addItem" size="mini" type="primary">新增</el-button>
         </el-form-item>
          <el-form-item label="二级模块">
                   <el-switch v-model="active_component.propValue.childrenMenu">
                </el-switch>
         </el-form-item>
          <el-form-item label="二级导航模块" v-if="active_component.propValue.childrenMenu">
          <div class="flex">
            <el-input v-model="active_component.propValue.childtitle"></el-input>
          </div>
                   <div class="flex" v-for="(item,i) of active_component.propValue.childrenList" :key="i">
                     <div class="flex">
                        <el-input v-model="item.name"></el-input>
                        <el-input v-model="item.link"></el-input>
                        <div class="close_item" @click="deleteItem(active_component.propValue.childrenList,i)">
                            <i class="el-icon-circle-close"></i>
                        </div>
                     </div>
                  </div>
                 <el-button @click="addChildrenItem" size="mini" type="primary">新增</el-button>
         </el-form-item>
         <el-form-item label="联系邮箱">
                      <el-input v-model="active_component.propValue.email"></el-input>
         </el-form-item>
         <el-form-item label="联系电话">
                      <el-input v-model="active_component.propValue.phone"></el-input>
         </el-form-item>
          <el-form-item label="联系地址">
                      <el-input v-model="active_component.propValue.address"></el-input>
         </el-form-item>
         <el-form-item label="二维码">
                      <el-input v-model="active_component.propValue.erweima"></el-input>
         </el-form-item>
         <el-form-item label="二维码描述">
                      <el-input v-model="active_component.propValue.erweimaLabel"></el-input>
         </el-form-item>
         <el-form-item label="备案号">
                      <el-input v-model="active_component.propValue.beian"></el-input>
         </el-form-item>

      </el-form>
    </el-tab-pane>
    <el-tab-pane label="样式管理" name="2">
          <el-form label-width="120px">
             <!-- <el-form-item label="链接选中底线">
                      <el-switch v-model="active_component.propValue.textDecoration"></el-switch>
            </el-form-item> -->
            <el-form-item label="链接选中颜色">
                     <div class="classbgbox">
                       <div class="bgItem" @click="checkbgchange(item)" :style="{background:item.color}" v-for="(item,i)  of colorList" :key="i"></div>
                     </div>
                     <div class="flex" style="margin-top:10px;">
                        <div>当前选中</div>
                       <div class="checkItem" :style="{background:checkbg}"></div>
                     </div>
            </el-form-item>
         </el-form>
    </el-tab-pane>
  </el-tabs>
     
    </div>
    <div class="flex-center" style="margin-top:10px;">
      <el-button size="small" type="" @click="closeTK"
        >取消</el-button
      >
       <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import M from "minimatch";
import Upload  from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList","activeCompont"],
  components: {Upload},
  data() {
    return {
      name: "",
      activeName:"1",
      tabIndex: 0,
      checkbg:'',
      active_component: {},
      colorList:[
        {className:'custom_hover1',color:'rgb(252, 192, 46)'},
        {className:'custom_hover2',color:'rgb(246, 124, 1)'},
        {className:'custom_hover3',color:'rgb(230, 74, 25)'},
        {className:'custom_hover4',color:'rgb(216, 27, 67)'},
        {className:'custom_hover5',color:'rgb(142, 36, 170)'},
        {className:'custom_hover6',color:'rgb(81, 45, 167)'},
        {className:'custom_hover7',color:'rgb(31, 135, 232)'},
        {className:'custom_hover8',color:'rgb(0, 135, 129)'},
        {className:'custom_hover9',color:'rgb(5, 160, 69)'},
        {className:'custom_hover10',color:'rgb(254, 216, 53)'},
        {className:'custom_hover11',color:'rgb(251, 140, 0)'},
        {className:'custom_hover12',color:'rgb(245, 81, 30)'},
        {className:'custom_hover13',color:'rgb(235, 29, 78)'},
        {className:'custom_hover14',color:'rgb(156, 40, 177)'},
        {className:'custom_hover15',color:'rgb(93, 53, 176)'},
        {className:'custom_hover16',color:'rgb(32, 151, 243)'},
        {className:'custom_hover17',color:'rgb(2, 150, 136)'},
        {className:'custom_hover18',color:'rgb(76, 176, 80)'},
        {className:'custom_hover19',color:'rgb(255, 235, 60)'},
        {className:'custom_hover20',color:'rgb(255, 167, 39)'},
        {className:'custom_hover21',color:'rgb(254, 87, 34)'},
        {className:'custom_hover22',color:'rgb(235, 65, 101)'},
        {className:'custom_hover23',color:'rgb(170, 71, 188)'},
        {className:'custom_hover24',color:'rgb(103, 59, 183)'},
        {className:'custom_hover25',color:'rgb(66, 165, 246)'},
        {className:'custom_hover26',color:'rgb(38, 165, 154)'},
        {className:'custom_hover27',color:'rgb(131, 198, 131)'},
        {className:'custom_hover28',color:'rgb(255, 241, 118)'},
        {className:'custom_hover29',color:'rgb(255, 183, 78)'},
        {className:'custom_hover30',color:'rgb(255, 138, 102)'},
        {className:'custom_hover31',color:'rgb(241, 98, 126)'},
        {className:'custom_hover32',color:'rgb(185, 104, 199)'},
        {className:'custom_hover33',color:'rgb(121, 134, 204)'},
        {className:'custom_hover34',color:'rgb(100, 181, 246)'},
        {className:'custom_hover35',color:'rgb(128, 203, 196)'},
        {className:'custom_hover36',color:'rgb(165, 214, 167)'},
        {className:'custom_hover37',color:'rgb(255, 245, 156)'},
        {className:'custom_hover38',color:'rgb(255, 204, 128)'},
        {className:'custom_hover39',color:'rgb(255, 171, 145)'},
        {className:'custom_hover40',color:'rgb(251, 135, 158)'},
        {className:'custom_hover41',color:'rgb(207, 147, 217)'},
        {className:'custom_hover42',color:'rgb(158, 168, 219)'},
        {className:'custom_hover43',color:'rgb(144, 202, 248)'},
        {className:'custom_hover44',color:'rgb(178, 223, 220)'},
        {className:'custom_hover45',color:'rgb(200, 230, 202)'},
        {className:'custom_hover46',color:'rgb(255, 255, 255)'},
        {className:'custom_hover47',color:'rgb(222, 222, 222)'},
        {className:'custom_hover48',color:'rgb(169, 169, 169)'},
        {className:'custom_hover49',color:'rgb(75, 75, 75)'},
        {className:'custom_hover50',color:'rgb(53, 53, 53)'},
        {className:'custom_hover51',color:'rgb(33, 33, 33)'},
        {className:'custom_hover52',color:'rgb(0, 0, 0)'},
      ]
    };
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  created() {
    if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.value == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
      }
    }
    }

  },

  methods: {
    deleteItem(list,i){
        list.splice(i,1)
    },
    checkbgchange(item){
       this.active_component.propValue.hoverClass=item.className
       this.checkbg=item.color
    },
    changeColor(e){
      let childrenList=this.active_component.propValue.childrenList
      let footerList=this.active_component.propValue.footerList
      for(let item of childrenList){
        item.LinkHoverColor=this.active_component.propValue.LinkHoverColor
      }
        for(let item of footerList){
        item.LinkHoverColor=this.active_component.propValue.LinkHoverColor
      }
    },
    addItem(){
        this.active_component.propValue.footerList.push({
            name:'导航名称',
            link:'./index.html'
        })
    },
    onremove(){
           this.active_component.propValue.img=''
    },
    loadSuccess(res){
           this.active_component.propValue.img=res.data
    },
    addChildrenItem(){
         this.active_component.propValue.childrenList.push({
            name:'导航名称',
            link:'./index.html'
        })
    },
    confrim(e){
      this.active_component.propValue.img=e
    },
    closeTK(){
        this.$emit("closeTK")
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
    pushcanvas() {
  // console.log(this.$store.state.componentData)
      //从list中筛选出对应的jsan
    //   for (let key in this.componentList) {
    //     if (
    //       this.componentList[key].isDialog &&
    //       this.componentList[key].propValue.value == this.componentId
    //     ) {
    //       console.log(this.componentList[key]); //获取到对应组件数据
          // 进行添加缓存/vuex
        //   let canvasData = JSON.parse(localStorage.getItem("canvasData"));

        //   canvasData.push(component);
          // localStorage.setItem("canvasData", JSON.stringify(canvasData));
        //   localStorage.setItem("canvasStyle", JSON.stringify(canvasStyle));
        if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
            this.$emit("closeTK")//关闭弹框
        }else{
            let canvasStyle = this.$store.state.canvasStyleData;
          let component = this.active_component;
          component.style.top = Number(canvasStyle.height);
          component.style.left = 0;

           this.$store.commit("addComponent", { component: component });
            canvasStyle.height = String(
              Number(canvasStyle.height) + Number(component.style.height)
            );
            this.$store.commit("setCanvasStyle", canvasStyle);
            this.$emit("closeTK")//关闭弹框
        }

    //     }
    //   }
    },
  },
};
</script>
<style>
.w-e-bar>div:nth-child(23),.w-e-bar>div:nth-child(24) {
  display: none;
}
</style>
<style lang="scss" scoped>
.tuwen_box {
  // width: 300px;
  img {
    width: 100%;
  }
  .jz_box {
    width: 500px;
  }
  .jz-photo-group {
    width: 64px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #aaa;
    .jz_style_img {
      width: 62px;
      height: 48px;
      background: url("../../assets/iconfont/mbg02.png") no-repeat;
    }
    .jz_style_img_0 {
      background-position: -314px -3px;
    }
    .jz_style_img_1 {
      background-position: -314px -145px;
    }
    .jz_style_img_3 {
      background-position: -314px -74px;
    }
    .jz_style_img_2 {
      background-position: -314px -218px;
    }
    .jz_style_img_4 {
      background-position: -314px -288px;
    }
    .jz_style_img_5 {
      background-position: -314px -362px;
    }
    .jz_style_img_6 {
      background-position: -314px -431px;
    }
  }
}
.group_active {
  border: 1px solid #5874d8 !important;
  position: relative;
}
.group_active::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 24px;
  background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}
.quill-wrap{
    width: 600px;
    margin: 0 auto;
    margin-left: 50px;
}
.close_item{
    margin-left: 5px;
    cursor: pointer;
}
.classbgbox{
  width: 228rem;
  // height: 152px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #999;
  .bgItem{
    width: 25px;height: 25px;
    transition: .2s;
    cursor: pointer;
  }
  .bgItem:hover{
    transform: scale(1.2);
  }
}
.checkItem{
    width: 27px;
    height: 27px;
    border: 1px solid #999;
  }
</style>

